<template>
  <div>
    <!-- f1：封面图片+名称和分类 -->
    <div class="top">
      <!-- 左侧封面图片 -->
      <img v-if="detail.length != 0 && detail.cover.indexOf('http') == -1" :src="URL.HYRJURL + '/' + detail.cover" alt="">
      <img v-if="detail.length != 0 && detail.cover.indexOf('http') != -1 " :src="detail.cover" alt="">
      <!-- 右侧花卉名称及分类 -->
      <div class="right">
        <p><span>花卉名称：</span>{{ detail.name }}</p>
        <p><span>所属分类：</span>{{ types[detail.type_id] }}</p>
      </div>
    </div>
    <!-- f2：花卉百科知识详情 -->
    <div>
      <p><span>花卉百科详情：</span></p>
      <p class="detail">{{ detail.detail }}</p>
    </div>
  </div>
</template>

<script>
import httpApi from '@/http';
import URL from '@/http/BaseUrl'

  export default {
    data() {
      return {
       detail:[],
       URL,
       types:{
        10:'春季花卉',
        20:'夏季花卉',
        30:'秋季花卉',
        40:'冬季花卉'
       }
      }
    },
    // 生命周期方法，页面挂载完成时执行
    mounted(){
      // 获取传递的参数
      let id = this.$route.params.id
      // 发请求，通过id查询花卉详情
      httpApi.EncyclopediasApi.queryInfoById({id}).then(res=>{
        console.log('当前花卉详情',res)
        this.detail = res.data.data[0]
      })
    }
  }
</script>

<style lang="scss" scoped>
.top{
  display: flex;
  margin-bottom: 20px;
  >img{
    width: 600px;
    height: 400px;
    margin-right: 30px;
  }
  .right{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    p{
      font-size: 25px;
      font-weight: 500;
    }
  }
}
span{
  font-size: 27px;
  font-weight:1000;
}
.detail{
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  text-indent: 2rem;
  margin-top: 15px;
}
</style>